<template>
  <section class="p-2">
    <search-title
      title="搜索历史"
      :showDelete="true"
      ></search-title>
      <div class="history-list _m-2">
        <span v-for="item in getSearchList" :key="item">{{item}}</span>
      </div>
  </section>  
</template>

<script>
import SearchTitle from './SearchTitle'

import {mapState} from 'vuex'

export default {
  name: 'SearchHistory',
  components: {
    SearchTitle
  },
  computed: {
		...mapState([
			'searchHistoryList',
		]),
    getSearchList() {
      let searchList = [];
			if(this.searchHistoryList) {
				searchList = JSON.parse(this.searchHistoryList);
			}
			return searchList;
    }
  }
}
</script>

<style lang="stylus" scoped>
section {
  background #FFF

  .history-list {
    padding 10px 0
    span {
      display inline-block
      background #efefef
      padding 6px 10px
      margin 0 0 10px 0
      border-radius 10px
      margin-right 10px
      font-size 14px
    }
  }
}
</style>

